<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <style>
        .a{
            background-color: aqua;
        }
        .b{
            color: red;
            padding: 20px;
        }
    </style>
</head>
<body>
<a href="index.html">返回</a>
<div class="app">
    <h2 :class="classstr" >数组class绑定 </h2>
    <h2 :class="classobj">对象class绑定 </h2>
    <h2 :style="styleobj">数组style绑定 </h2>
</div>
<script>
    Vue.config.productionTip=false  //关闭生产状态提示
    const x=new Vue({
        // el:".app",
        data:function (){  //data的第二种写法
            return{
                classstr:['a','b'],
                classobj:{
                    a:true,
                    b:true
                },
                styleobj:{
                    fontSize:'40px',
                    color:'red',
                    backgroundColor:'green'
                }
            }
        }
    })
        x.$mount(".app")//挂载方式
</script>
</body>
</html>